<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>小程序直播</span>
      </div>
    </div>
    <div class="pad_lr_20">
      <div class="lh25 mar_t10 msgtext fon_14">
        温馨提示：
        1、需要在小程序后台开通直播权限，才可以使用本功能！
        <p class="tind">2、点击同步直播间，可获取小程序直播房间列表信息（获取额度：100000次/一天（与获取回放接口共用次数），请合理分配和获取次数）</p>
        <p class="tind fon_14">
          3、微信小程序直播功能准入要求说明：
          <span class="subjectcolor2">https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/images/access_02b58d.pdf</span>
        </p>
      </div>
    </div>
    <div class="mar_t20">
      <el-button type="primary" @click="handleEdit" size="medium">创建直播间</el-button>
      <el-button type="primary" :loading="updtebtn" plain size="medium" @click="updateLive">同步直播间</el-button>
    </div>
    <div class="tabledata mar_t20">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column prop="roomid" label="房间ID"></el-table-column>
        <el-table-column prop="name" label="房间名"></el-table-column>
        <el-table-column prop="anchor_name" label="主播信息"></el-table-column>
        <el-table-column label="封面图片" width="150">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>
                <img :src="scope.row.cover_img" class="listImgWidth" />
              </p>
              <div slot="reference" class="name-wrapper">
                <div class="imgbox">
                  <img :src="scope.row.cover_img" class="tabimg" />
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="计划直播时间" width="300">
          <template slot-scope="scope">
            <div>{{scope.row.start_time}}</div>
            <div>{{scope.row.end_time}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="live_status" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.live_status==101"><el-tag type="success" size="mini">直播中</el-tag></div>
            <div v-if="scope.row.live_status==102"><el-tag type="info" size="mini">未开始</el-tag></div>
            <div v-if="scope.row.live_status==103"><el-tag type="info" size="mini">已结束</el-tag></div>
            <div v-if="scope.row.live_status==104"><el-tag type="danger" size="mini">禁播</el-tag></div>
            <div v-if="scope.row.live_status==105"><el-tag size="mini">暂停中</el-tag></div>
            <div v-if="scope.row.live_status==106"><el-tag type="warning" size="mini">异常</el-tag></div>
            <div v-if="scope.row.live_status==107"><el-tag type="info" size="mini">已过期</el-tag></div>
          </template>
        </el-table-column>
        <!--                <el-table-column-->
        <!--                        label="操作"-->
        <!--                >-->
        <!--                    <template slot-scope="scope">-->
        <!--                        <div class="flex">-->
        <!--&lt;!&ndash;                            <el-button type="text" @click="handleEdit(scope.row)">查看</el-button>&ndash;&gt;-->
        <!--                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
        <!--                        </div>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import { liveList } from '@/api/plug';

export default {
  created() {
    this.fetchData();
  },
  data() {
    return {
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      synchro: '',
      updtebtn: false
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await liveList({ page: this.page.currentPage, synchro: this.synchro });
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
      this.updtebtn = false;
    },
    handleCurrentChange(val) {
      this.synchro = 0;
      this.page.currentPage = val;
      this.fetchData();
    },
    updateLive() {
      this.updtebtn = true;
      this.synchro = 1;
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await modifyReduce({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await modifyReduce({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    handleEdit(row) {
      if (row.id) {
        this.$router.push(`/liveAdd?id=${row.id}`);
      } else {
        this.$router.push({ path: 'liveAdd' });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.listImgWidth {
  width: 120px;
  height: 120px;
}

.tabimg {
  width: 30px;
  height: 30px;
}

.msgtext {
  text-indent: -60px;
  padding-left: 70px;
}
.tind {
  text-indent: 14px;
}
</style>
